<template>
	<div class="header">
	  	<div class="header-left">
	  		<div class="iconfont back-icon">&#xe624;</div>
	  	</div>
	  	<div class="header-input">
	  		<span class="iconfont">&#xe632;</span>
	  		输入城市/景点/游玩主题
	  	</div>
	  	<router-link to='/city'>
		  	<div class="header-right">
		  		{{this.city}}
		  		<span class="iconfont arrow-icon">&#xe64a;</span>
		  	</div>
		</router-link>
  	</div>
</template>

<script>
import { mapState} from 'vuex'
export default{
  name: "HomeHeader",
  // props:{
  // 	city:String
  // },
  computed:{
  	...mapState(['city']),
  }
}
</script>
<style lang="stylus" scope> 
@import '~styles/varibles.styl'
.header{line-height:$headerHeight;display:flex;background:$bgColor;color:#fff;}
.header-left{width:0.64rem;float:left;}
.back-icon{text-align:center;font-size:0.4rem;}
.header-input{flex:1;background:#fff;border-radius:0.1rem;margin-top:0.12rem;height:0.64rem;line-height:0.64rem;margin-left:0.2rem;color:#ccc;padding-left:0.2rem;}
.header-right{min-width:1.04rem;float:right;text-align:center;color:#fff;padding:0 0.1rem}
.arrow-icon{font-size:0.24rem;margin-left:-0.04rem;}

		
</style>


